<template>
  <div class="py-8">
    <div class="text-center mb-12">
      <h1 class="text-4xl font-noto font-bold text-accent mb-4">消息</h1>
      <p class="text-lg text-accent opacity-80">我们的对话记录</p>
    </div>

    <div class="max-w-2xl mx-auto">
      <div class="space-y-4">
        <!-- 消息列表 -->
        <div class="card p-4">
          <div class="flex items-start space-x-4">
            <div class="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center">
              <span class="text-accent">我</span>
            </div>
            <div class="flex-1">
              <div class="flex items-center justify-between mb-2">
                <h3 class="font-noto font-bold text-accent">我</h3>
                <span class="text-sm text-accent/60">2025年4月24日 14:30</span>
              </div>
              <p class="text-accent">亲爱的，今天过得怎么样？</p>
            </div>
          </div>
        </div>

        <div class="card p-4">
          <div class="flex items-start space-x-4">
            <div class="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center">
              <span class="text-accent">你</span>
            </div>
            <div class="flex-1">
              <div class="flex items-center justify-between mb-2">
                <h3 class="font-noto font-bold text-accent">你</h3>
                <span class="text-sm text-accent/60">2025年4月24日 14:35</span>
              </div>
              <p class="text-accent">今天很开心，因为有你陪伴！</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 组件逻辑
</script> 